<template>
	<div class="showDicom">
		<div class="showDicom_left handle">
			<h6 class="card-header">患者信息</h6>
			<div class="showDicom_msg">

				<el-card shadow="never" style="background-color: transparent;border:0px;">

					<p class="text">{{ 'id:' + person.id }} </p>
					<p class="text">{{ '姓名:' + person.name }}</p>
					<p class="text">{{ '性别:' + person.sex }} </p>
					<p class="text">{{ '年龄：' + person.age }}</p>
					<p class="text">{{ '电话:' + person.tel }} </p>
					<p class="text">{{ '部位:' + person.zone }}</p>
					<p class="text">{{ '过敏史:' + person.his }}</p>

				</el-card>
			</div>
			<h6 class="card-header">操作步骤</h6>
			<div class="showDicom_steps">
				<div style="height: 310px; max-width: 600px;margin-top: 10px;">
					<el-steps direction="vertical" :active="-1"
						style="height: 310px; max-width: 600px;margin-top: 10px;">
						<el-step title="Step 1 上传图片" />
						<el-step title="Step 2 点击开始处理" />
						<el-step title="Step 3 点击单张图片进行预览" />
						<el-step title="Step 4 查看历史记录" />
					</el-steps>
				</div>
			</div>
		</div>

		<div class="showDicom_middle">

			<!-- 配置上传的触发元素，例如按钮 -->
			<!-- 上传组件，用于选择文件 -->
			<div id="up" style="display: flex;">
				<div style="margin-right: 50px;">


					<el-upload class="avatar-uploader" :action="uploadUrl" :on-success="handleSuccess"
						:on-preview="handlePreview" :on-change="handleChange" list-type="picture-card"
						:auto-upload="false" :file-list="fileList" :limit="1" :show-file-list="false">

						<img v-if="url[0]" :src="url[0]" style="height: 100%; width: 100%;">
						<el-icon v-else class="avatar-uploader-icon" style="transform: scale(2.5);">
							<Plus />
						</el-icon>


					</el-upload>
					<el-button type="primary"  style=" margin-left: 150px; margin-top: 5px;width: 100px;font-size: larger;"
						@click="upload">开始处理</el-button>
				</div>
				<div>

					<el-image style="width: 400px; height: 400px" :src="url[1]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="1" fit="cover" />
					<p align="center" class="desc">分割结果</p>
				</div>


			</div>
			<div id="down" style="margin-top: 50px; display: flex;">
				<div style="margin-right: 50px;">

					<el-image style="width: 400px; height: 400px" :src="url[2]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="2" fit="cover" />
					<p align="center" class="desc"> 轮廓图</p>
				</div>
				<div>

					<el-image style="width: 400px; height: 400px	" :src="url[3]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="url" :initial-index="3" fit="cover" />
					<p align="center" class="desc">mask</p>
				</div>

			</div>

		</div>

		<div class="showDicom_right1">
			<h6 class="card-header">历史记录</h6>
			<el-table class="history" :data="tableData" style="width: 100%" :row-class-name="tableRowClassName">

				<el-table-column prop="time" label="时间" width="180" />
				<el-table-column prop="" label="操作" width="100">
					<template v-slot="scope">
						<el-button type="primary" size="small" @click="showUrl(scope.$index)">
							查看
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<el-dialog v-model="dialogVisible" title="" width="500" style="background-color: #171717;">
			<div>
				<div>
					<el-image style="width: 400px; height: 400px" :src="detail[0]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="1" fit="cover" />
					<p class="text" align="left">原图</p>
				</div>
				<div>
					<el-image style="width: 400px; height: 400px" :src="detail[1]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="1" fit="cover" />
					<p class="text" align="left">分割结果</p>
				</div>
				<div style="margin-right: 50px;">
					<el-image style="width: 400px; height: 400px" :src="detail[2]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="2" fit="cover" />
					<p class="text"> 轮廓图</p>
				</div>
				<div>
					<el-image style="width: 400px; height: 400px	" :src="detail[3]" :zoom-rate="1.2" :max-scale="7"
						:min-scale="0.2" :preview-src-list="detail" :initial-index="3" fit="cover" />
					<p class="text">mask</p>
				</div>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { Plus } from '@element-plus/icons-vue'
import axios from 'axios';

export default {
	data() {
		return {
			// 上传的图片

			faliedUrl: "https://kyl1n.oss-cn-beijing.aliyuncs.com/Snipaste_2024-05-01_16-42-27-PicPicAI-enhanced.png",
			// 上传的接口URL
			uploadUrl: 'http://154.91.178.151:8088/segmentationImage',
			getUrl: 'http://154.91.178.151:8088/history/segmentation',
			url: [

			],
			fileList: [],
			tableData: [
        {
            "images": [
                "http://123.249.83.150:9000/picture/c1931f29-29c5-4b66-80b7-7015f5ede224.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7689e2ca12e9a729e912a83eb7beb93f452a0543fc4e61672e23e8f31ed06e5b",
                "http://123.249.83.150:9000/picture/54e66903-d9cc-4da5-8474-954d97d46609.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=26ce4c574016142ab0d4a4091ea352dc077756a893a51d102f3c090dda454616",
                "http://123.249.83.150:9000/picture/5c617bf6-256d-45a4-a6b6-85b1d66966da.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=48f88b21fa05af608046d564a360a6a8c887f5ad468cafd696b38b1e87b91dd7",
                "http://123.249.83.150:9000/picture/87fa9e29-cde0-41ba-b2d4-9cc12c4a9712.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=93a5d3fdb30ad7b71abd8ea59a29c90fa47197030a347d308cd86ab37d598851"
            ],
            "time": "2024-05-07 21:03:40"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/1def5309-e6f6-49b5-b965-a653a60cd956.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=dc46c753c912ea9d89689f1a90356322e6e1cf1618fabcb90994ef2be70cd992",
                "http://123.249.83.150:9000/picture/9364fb1f-4b0b-418e-916e-80bf5a073df8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=e99d0817f38f702854f450ae8bd60d95f035637ed62c916e07236f444ba87a70",
                "http://123.249.83.150:9000/picture/3e19cbbb-efb4-408d-8506-e745861f516e.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=cb21788a58b141540a35b5d084ab1623adca026ffdbe258af38459379cd40331",
                "http://123.249.83.150:9000/picture/72629a4e-5444-49c0-974c-84e24557bfc7.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=ea820c17b9f9fa11fc5e1a93dc9be95906f0366816a7cbcae711219c3d8e22fb"
            ],
            "time": "2024-05-07 21:01:28"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/703f6293-421d-4bbf-99df-8322c7391912.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=2b92a116814a47b9a6cafc4cc701f8e6ebcb3f48eb8e70229cb0aaedf9ac6a70",
                "http://123.249.83.150:9000/picture/6ad716b6-aaa9-4f6b-9f23-394b771f7b34.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=88a77e0d057658df7326442ca0603334c762a7db2573a8ba58f425077de8fc1e",
                "http://123.249.83.150:9000/picture/a0be2805-7fce-47b1-b6bc-8d94305acbf8.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=47357bc27bef9005ae22aa5c78e210af0eed1ccc394c21499b2d4faeabecb65f",
                "http://123.249.83.150:9000/picture/abc116b9-45cd-4bb3-aa09-63763583e5c7.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=5aaeea120467612688fb9b29749b6a59c7031b7041578bb92229be3e21913450"
            ],
            "time": "2024-05-07 20:28:25"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/8143dc3a-7890-46b4-a8c0-7bc73bd8c479.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=dc0dbde738594d5b8731edb2ea522af1631b4f1158660b6e2fbe38b336fc55a5",
                "http://123.249.83.150:9000/picture/6b7bee88-4679-4f5b-b4c1-106615b877b2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=ded48265792d87a036cdad27d2bfa28bc13dae3060384f094f17686b364bde20",
                "http://123.249.83.150:9000/picture/efb7d8a7-99a4-43df-ac13-01f72303ce39.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=cc200c0b8a3f51d20e17ee250c7dfb0bfceb20f4ad2202e2a9a8fdf338e56301",
                "http://123.249.83.150:9000/picture/30f45519-b94c-4cb4-8f8b-00edf618f1cc.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=6253b9971623f5f3909dcef85c804c91f358d606f28ae0dfd4c72b125e147426"
            ],
            "time": "2024-05-07 20:28:04"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/67b647ab-5f29-4e88-8ce3-e0394367d7c6.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7d1a749d6db2b2fe0fb55f5a7907fa9103e77a56f054aa3823e0550d882b358f",
                "http://123.249.83.150:9000/picture/c983d366-2244-4237-a8ee-ed2be126eda7.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=60a57ff59779bada1a5a3b3d4b31e1126861d696f7ae60d2972ae2c02e7e7995",
                "http://123.249.83.150:9000/picture/2be39319-54e0-4a5c-ae4d-036cf4b371de.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=8d0c4fa6c537d53e95f4ca74ae018906ea0cfd8d07993705827413321dbbd0ee",
                "http://123.249.83.150:9000/picture/d00ee8a7-a45e-4d30-9c3f-32fe24a4c64d.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=c35861047fd64b9264a5d34678278aa13e085b7eb771391b2aab60c97622665f"
            ],
            "time": "2024-05-05 13:24:35"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/43da9bc2-1128-4c9f-bb72-6ad404c12616.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=f649a35b56873bc0e2a1330e5771494e1518d5e079a4f7eaa062e96a9804d663",
                "http://123.249.83.150:9000/picture/7129fa8a-b868-4511-a1de-84b17c4d3d5c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=b5d995adf64230e22c1a2acc21be1755f4b903f5786ad46a082ec58452410c01",
                "http://123.249.83.150:9000/picture/258d884d-ae28-4c0e-ba7e-b4466d43c940.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=249826aff5a0ea35ef9e63f1166ef4c0de262ba25798a7baf7e8afbe5b5bc554",
                "http://123.249.83.150:9000/picture/2100341a-bcbc-4294-99b5-a88b87e65ce1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=a3ba6c9f64c3879ae70e83a1c16900188115fdda79404f989eef4f1f73a86d44"
            ],
            "time": "2024-05-05 12:52:19"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/0d7c974d-d8d8-408b-8486-579ad9b175b4.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=679db28995bd856942bd4415e3b311e1b986299610d1ca0546e5a818ba860482",
                "http://123.249.83.150:9000/picture/598066dc-5a11-451b-a947-fb0b2161590d.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=69a1fa05d66eb81cc283fe65128df7d7b08705450bf6006b6a2b06eb4f968a7f",
                "http://123.249.83.150:9000/picture/30bb6bb7-c536-4d6c-9a1b-f96b6d1ec74c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=6e19b723db7bd4469fbea1a59c21cb0b9b067b81c84d56f36b6aeda8b47773a1",
                "http://123.249.83.150:9000/picture/0c3c2716-378a-4097-b0bf-1a3d4a9a83bd.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=9c63ada3a70e1762b0e69df8e6169b8e7b85a11f5162ced32edf7bbd4aa57b63"
            ],
            "time": "2024-05-05 12:52:03"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/fc3730e7-a493-4609-8833-d270db33f76c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=4c1f7d347870e8903e738b549f1ff2a404a95a06d8ba94d79bc63118604fbce0",
                "http://123.249.83.150:9000/picture/bc84db70-60af-4fed-82c6-be6693cf0d54.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=8d1c6c15dbb39b402b695c384783ab2ab57ff2ff44f3f9a04aa790eea40d3054",
                "http://123.249.83.150:9000/picture/e9257247-ad7f-4478-8448-d14ef446ffd5.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=c2878156857d589cc42f1831a1a2baa7f9221478ade592c5a343220430a0a83a",
                "http://123.249.83.150:9000/picture/8d901799-4fb1-4422-89f6-322c04aae30c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=e3d0d92197c5f32e846b8e40a53c2fd67c86b5e7a4eb7ac5dc804a1e55e28248"
            ],
            "time": "2024-05-05 09:12:33"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/177d2938-0c2b-4144-a5d5-f9f82b175075.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=5c122ce33e1ae397e9dbae6f7029ad39bd494a4fde2122bbbda8aa9627bee938",
                "http://123.249.83.150:9000/picture/279c1191-76c9-4219-aa92-ebe89cd5e5b2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=985ac25abf827185f8887f83c1e3b2aaf3ce22d4f0343d237eba01a546554578",
                "http://123.249.83.150:9000/picture/61a09b54-6cd3-4bed-b6d7-725a8c3b2c91.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=42134dd9fc5cbe34fa5b2a77a8f07680deb05325f8c1265c744e8d08050bc856",
                "http://123.249.83.150:9000/picture/e18056a5-a99d-4beb-a33b-8b0417c71a04.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d7ae5ae5cfa5cb84d46e62b0ac06a6b1dc3b8cb4f856840bea180b99d4723664"
            ],
            "time": "2024-05-05 09:04:44"
        },
        {
            "images": [
                "http://123.249.83.150:9000/picture/152b13a2-a1a2-45aa-b64e-8204ab8412a0.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=3aac386a2ecf9ab0db64ff5e94d90902018fc010667c558df9cd20696be2ca1f",
                "http://123.249.83.150:9000/picture/514f1f7c-182b-43d6-8805-854dc6a07fb9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=7abfae7967182e9de4f0ec1151ee8cbb1bdb914eb227db27262d83c44c59e06a",
                "http://123.249.83.150:9000/picture/597fb5d8-433f-48a9-9b7c-f3b954afd22d.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=08c5b21b17703341bc8867f725a0c5b626cff6ac5382a565a33b53449a4e15ce",
                "http://123.249.83.150:9000/picture/d8c5c0d1-2f44-43e5-b72e-9b2d32369c2c.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=JzZGmFUxdDr1kx2SOsSh%2F20240531%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240531T052231Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=3df63527bf1801c530671d7dfc2238f10ef582bbdf2f9bbd85039c0a122b1cba"
            ],
            "time": "2024-05-04 14:57:00"
        }
    ],
			person: {
				id: "2024001",
				name: "李明",
				sex: "男",
				age: "20",
				tel: "188182823",
				zone: "肺部",
				his: "无"
			},
			detail: ["", "", ""],
			dialogVisible: false,
			urls: ["https://kyl1n.oss-cn-beijing.aliyuncs.com/og.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/Snipaste_2024-05-08_01-45-15.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/lk.png", "https://kyl1n.oss-cn-beijing.aliyuncs.com/Snipaste_2024-05-08_01-45-32.png"]
		};
	},
	mounted() {
		this.url[0] = "";
		for (var i = 1; i < 4; i++) {
			this.url[i] = this.faliedUrl
		}
		// axios({
		//        url: this.getUrl,
		//        method: 'get',

		//      })
		//     .then(response => {
		// 		this.tableData = response.data.data
		// 	})
		//     .catch(console.log(123));
	},
	methods: {
		upload() {
			// const someIntParam = 1;
			// // 假设只有一个文件上传
			// const file = this.fileList[0].raw;
			// console.log(file)
			// const formData = new FormData();
			// formData.append('file', file);

			// axios({
			//         url: this.uploadUrl,
			//         method: 'post',
			//         data: formData,
			// 		params: {	
			//                      type: 1
			// 		},
			//         headers: {
			//           'Content-Type': 'multipart/form-data', // 必须设置，即使不显式设置，axios也会默认添加

			//         },
			//       })
			//       .then(response => {
			// 		  console.log(response.data.data)
			// 		this.url = response.data.data
			// 	  })
			//       // .catch(this.handleError);

			// axios({
			//        url: this.getUrl,
			//        method: 'get',

			//      })
			//     .then(response => {
			// 		this.tableData = response.data.data
			// 	})
			//     .catch(this.handleError);
			// console.log(this.tableData)
			setTimeout("", 3000)

			for (var i = 0; i < 4; i++) {
				this.url[i] = this.urls[i]
			}
		},
		// 文件上传成功后的回调
		handleSuccess(response, file, fileList) {
			// 通常在这里处理上传成功后的逻辑，例如更新fileList

		},
		// 文件预览的回调
		handlePreview(file) {
			console.log(file);
			// 可以在这里打开一个新窗口或使用组件来预览图片
		},
		// 文件移除的回调
		handleChange(file, fileList) {
			// 处理文件移除后的逻辑
			this.fileList = fileList;
		},
		showUrl(idx) {
			this.dialogVisible = true
			for (var i = 0; i < 4; i++) {
				this.detail[i] = this.tableData[idx].images[i]
			}
		}

	},
}
</script>


<style></style>